<template>
  <div class="body-box">
    <!-- 第三行数据 -->
    <div class="content-boxcv">
      <div class="one">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日全市作业情况 </span>
            </div>
          </div>

          <div style="margin: 20px">
            <h3>全市作业道路  {{ staticInfo.cityRoadWork }}  条</h3>
          </div>
          <div style="margin: 20px">
            <h3>全市未作业道路 {{ staticInfo.cityRoadUnWork }} 条</h3>
          </div>
          <div style="margin: 20px">
            <h3>全市作业里程 {{ staticInfo.cityRoadMileage }} 米</h3>
          </div>
          <div style="margin: 20px">
            <h3>全市作业班次 {{ staticInfo.cityClassTimes }} 次</h3>
          </div>
        </dv-border-box-7>
      </div>
      <!-- <div class="one">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">实时车辆在线统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_VZ" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div> -->
      <div class="two">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各区以克论净排名 </span>
            </div>
          </div>

          <div id="WorkOnStandard_DW" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="three">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各区作业覆盖率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_DB" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <!-- <div class="four">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各街道车辆实时在线百分比</span>
            </div>
          </div>
          <div id="WorkOnStandard_GZ" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div> -->
      <div class="five">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">车辆实时在线率和当日出动率</span>
            </div>
          </div>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 200px"
                ></div> -->
          <div id="WorkOnStandard_VC" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="six">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日全市各区早晚高峰违规作业数量</span
              >
            </div>
          </div>
          <div id="WorkOnStandard_XS" style="width: 98%; height: 300px"></div>
        </dv-border-box-7>
      </div>
      <!-- <div class="seven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日洒水道路作业情况、作业达标情况</span
              >
            </div>
          </div>

          <div id="WorkOnStandard_SS" style="width: 98%; height: 300px"></div>
        </dv-border-box-7>
      </div> -->
      <div class="eight">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各区出动率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_GC" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="nine">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各区违规洒水作业数量 </span>
            </div>
          </div>

          <div id="WorkOnStandard_VX" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="ten">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各类型车辆出动率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_GX" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="eleven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日全市各等级道路作业率</span>
            </div>
          </div>

          <div id="WorkOnStandard_JS" style="width: 98%; height: 300px"></div>
        </dv-border-box-7>
      </div>
      <!-- <div class="twelve">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日冲洗道路作业情况、作业达标情况
              </span>
            </div>
          </div>
          <div id="WorkOnStandard_CX" style="width: 98%; height: 300px"></div>
        </dv-border-box-7>
      </div> -->

      <div class="thirteen">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div style="width: 100%; height: 190px">
            <el-row :gutter="12" style="margin: 1% 0">
              
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">干扫车</div>
                  <div class="hd">{{ staticInfo.vehicleGS }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">小型机扫车</div>
                  <div class="hd">{{ staticInfo.vehicleXXJS }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">洒水车</div>
                  <div class="hd">{{ staticInfo.vehicleSS }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">洗路车</div>
                  <div class="hd">{{ staticInfo.vehicleXL }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">高压清洗车</div>
                  <div class="hd">{{ staticInfo.vehicleGYQX }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">除雪车</div>
                  <div class="hd">{{ staticInfo.vehicleCX }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">道路数</div>
                  <div class="hd">{{ staticInfo.roadAll }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">主干</div>
                  <div class="hd">{{ staticInfo.roadFirst }}</div>
                </el-card>
              </el-col>
            </el-row>

            <el-row :gutter="12" style="margin: 1% 0">
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">干扫车在线数</div>
                  <div class="hd">{{ staticInfo.vehicleGS_on }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">小型机扫车在线数</div>
                  <div class="hd">{{ staticInfo.vehicleXXJS_on }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">洗路车在线数</div>
                  <div class="hd">{{ staticInfo.vehicleXL_on }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">高压清洗车在线数</div>
                  <div class="hd">{{ staticInfo.vehicleGYQX_on }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">洒水车在线数</div>
                  <div class="hd">{{ staticInfo.vehicleSS_on }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">除雪车在线数</div>
                  <div class="hd">{{ staticInfo.vehicleCX_on }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">次干</div>
                  <div class="hd">{{ staticInfo.roadSecond }}</div>
                </el-card>
              </el-col>
              <el-col :span="3">
                <el-card shadow="always">
                  <div class="ht">支路</div>
                  <div class="hd">{{ staticInfo.roadThird }}</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </dv-border-box-7>
      </div>
      <!-- <div class="thirteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >车均报警次数情况统计
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_VB"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div> -->
      <!-- <div class="fourteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各街道车均报警次数百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_GB"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div> -->
    </div>
  </div>
</template>

<script>
import { optionWorkOnStandard } from '@/components/echart/bar.js'
import { optionWorkOnStandardH } from '@/components/echart/bar.js'
import { collectionRate } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { brokenLine1 } from '@/components/echart/bar.js'
import { spotsNumbe2 } from '@/components/echart/bar.js'
import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import { formatDate } from '@/common/js/date.js'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      ClientNo: '00000',
      nowDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '00000',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
        staticInfo1: ''
      },
      staticInfo: {
        cityRoadWork: '',
        cityRoadUnWork: '',
        cityRoadMileage: '',
        cityClassTimes: '',
        vehicleGS: '',
        vehicleGS_on: '',
        vehicleXXJS: '',
        vehicleXXJS_on: '',
        vehicleXL: '',
        vehicleXL_on: '',
        vehicleGYQX: '',
        vehicleGYQX_on: '',
        vehicleSS: '',
        vehicleSS_on: '',
        vehicleCX: '',
        vehicleCX_on: '',
        roadAll: '',
        roadFirst: '',
        roadSecond: '',
        roadThird: '',
      },
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    // this.ClientNo = localStorage.getItem('ClientNo');
    // this.initWorkOnStandard_SS()
    // this.initWorkOnStandard_CX()
    this.initWorkOnStandard_XS()
    this.initWorkOnStandard_JS()
    this.initWorkOnStandard_VZ()
    this.initWorkOnStandard_DW()
    this.initWorkOnStandard_DB()
    // this.initWorkOnStandard_GZ()
    this.initWorkOnStandard_GC()
    this.initWorkOnStandard_VC()
    this.initWorkOnStandard_VX()
    this.initWorkOnStandard_GX()
    // this.initWorkOnStandard_VB()
    // this.initWorkOnStandard_GB()

    this.initWorkRatioByCartype()
    this.initStaticInfo()

    this.timeFn()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    async initStaticInfo () {
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=&url=EXEC TA_GetStatisticsInfo '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      this.staticInfo.cityRoadWork = data[0].value
        this.staticInfo.cityRoadUnWork = data[1].value
        this.staticInfo.cityRoadMileage = data[2].value
        this.staticInfo.cityClassTimes = 52
        this.staticInfo.vehicleGS = data[3].value
        this.staticInfo.vehicleXXJS = data[4].value
        this.staticInfo.vehicleXL = data[5].value
        this.staticInfo.vehicleGYQX = data[6].value
        this.staticInfo.vehicleSS = data[7].value
        this.staticInfo.vehicleCX = data[8].value

        this.staticInfo.vehicleGS_on = data[9].value
        this.staticInfo.vehicleXXJS_on = data[10].value
        this.staticInfo.vehicleXL_on = data[11].value
        this.staticInfo.vehicleGYQX_on = data[12].value
        this.staticInfo.vehicleSS_on = data[13].value
        this.staticInfo.vehicleCX_on = data[14].value

        this.staticInfo.roadAll = data[15].value
        this.staticInfo.roadFirst = data[18].value
        this.staticInfo.roadSecond = data[16].value
       this.staticInfo.roadThird = data[17].value
    },
    // 昨日各类型餐饮单位收运数量及覆盖率格式
    async initWorkRatioByCartype () {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
        category: ["小区", "饭店", "企业"],
        // lineData: [300, 400, 600], barData: [276, 348, 336],
        // rateData: [92, 87, 56,]
      }));
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=" + this.ClientNo;
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.rateData
        }, {
          data: data.barData
        }, {
          data: data.lineData
        }]

      });
    },
    // 实时车辆在线统计
    async initWorkOnStandard_VZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 昨日各区违规洒水作业数量
    async initWorkOnStandard_VX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine1());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetVehicleSSWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{

          data: data[1]
        }]
      });
    },
    // 昨日各区以克论净排名
    async initWorkOnStandard_DW () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DW'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine1());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetVehicleYkljWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{

          data: data[1]
        }]
      });
    },
    // 车辆实时在线率和当日出动率
    async initWorkOnStandard_VC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine1());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetVehicleOnlineInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          name: '在线率',
          data: data[1]
        }, {
          name: '出动率',
          data: data[2]
        },]
      });
    },
    // 车均报警次数情况统计
    // async initWorkOnStandard_VB () {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById('WorkOnStandard_VB'));
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(collectionRate());
    //   var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
    //   //  +localStorage.getItem("CLIENT_NO");
    //   const { data } = await this.$Http.get(url)
    //   myChart.setOption({
    //     series: [{
    //       data: data
    //     },]
    //   });
    // },
    // 各街道车辆实时在线百分比
    // async initWorkOnStandard_GZ () {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById('WorkOnStandard_GZ'));
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(spotsNumbe2());
    //   // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" +this.ClientNo + "'"
    //   //  +localStorage.getItem("CLIENT_NO");
    //   // const { data } = await this.$Http.get(url);
    //   myChart.setOption({
    //     xAxis: {
    //       data: ["丰年村街", "华明街", "华新街", "开发区", "张贵庄街", "金钟街", "万新街"]
    //     },
    //     series: [{

    //       data: ["20", "15.1", "13", "12.1", "10", "6.7", "2"]
    //     }]
    //   });
    // },
    //昨日各区出动率
    async initWorkOnStandard_GC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetVehicleClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    //昨日各类型车辆出动率
    async initWorkOnStandard_GX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetVehicleCartypeWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各区作业覆盖率
    async initWorkOnStandard_DB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    //各街道车均报警次数百分比
    // async initWorkOnStandard_GB () {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById('WorkOnStandard_GB'));
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(spotsNumbe2());
    //   var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
    //   //  +localStorage.getItem("CLIENT_NO");
    //   const { data } = await this.$Http.get(url);
    //   myChart.setOption({
    //     xAxis: {
    //       data: data.categories
    //     },
    //     series: [{

    //       data: data.data
    //     }]
    //   });
    // },
    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },
    // async initWorkOnStandard_SS () {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById('WorkOnStandard_SS'));
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(optionWorkOnStandard());
    //   var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洒水";
    //   const { data } = await this.$Http.get(url)
    //   myChart.setOption({
    //     xAxis: {
    //       data: data.categories
    //     },
    //     series: [{
    //       data: data.dataWork
    //     }, {
    //       data: data.dataNotWork
    //     }, {
    //       data: data.dataOnStandard
    //     }, {
    //       data: data.dataNotStandard
    //     }]
    //   });
    // },
    // async initWorkOnStandard_CX () {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById('WorkOnStandard_CX'));
    //   // 使用刚指定的配置项和数据显示图表。
    //   myChart.setOption(optionWorkOnStandard());
    //   var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',冲洗";
    //   const { data } = await this.$Http.get(url)
    //   myChart.setOption({
    //     xAxis: {
    //       data: data.categories
    //     },
    //     series: [{
    //       data: data.dataWork
    //     }, {
    //       data: data.dataNotWork
    //     }, {
    //       data: data.dataOnStandard
    //     }, {
    //       data: data.dataNotStandard
    //     }]
    //   });
    // },
    //昨日全市各区早晚高峰违规作业数量
    async initWorkOnStandard_XS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_XS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetVehicleZWWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        legend: {
          data: ['早高峰', '晚高峰']
        },
        xAxis: {
          data: data[0]
        },
        series: [{
          name: '早高峰',
          data: data[1]
        }, {}, {}, {
          name: '晚高峰',
          data: data[2]
        }]
      });
    },
    //昨日全市各等级道路作业率
    async initWorkOnStandard_JS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandardH());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadLevelWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        legend: {
          data: ['主干总数', '次干总数', '支路总数', '主干作业', '次干作业', '支路作业']
        },
        xAxis: {
          data: data[0]
        },
        series: [{
          name: '主干总数',
          data: data[1]
        }, {}, {
          name: '次干总数',
          data: data[2]
        }, {
          name: '支路总数',
          data: data[3]
        }, {
          name: '主干作业',
          data: data[4]
        }, {}, {
          name: '次干作业',
          data: data[5]
        }, {
          name: '支路作业',
          data: data[6]
        }]
      });
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
.content-boxcv {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(8, 11.8%);
  grid-template-areas:
    'one thirteen thirteen thirteen'
    'one thirteen thirteen thirteen'
    'five six six eight'
    'five six six eight'
    'nine six  six three'
    'nine eleven  eleven three'
    'two eleven eleven ten'
    'two eleven eleven ten';
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8, 48, 74, 0.5);
}

.two {
  margin: 5px;
  grid-area: two;
  background: rgba(8, 48, 74, 0.5);
  // grid-row-start: span 2;
}
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8, 48, 74, 0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8, 48, 74, 0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8, 48, 74, 0.5);
}
.six {
  margin: 5px;
  grid-area: six;
  background: rgba(8, 48, 74, 0.5);
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8, 48, 74, 0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8, 48, 74, 0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8, 48, 74, 0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8, 48, 74, 0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8, 48, 74, 0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8, 48, 74, 0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8, 48, 74, 0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8, 48, 74, 0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}
</style>
